<template>
  <div style="margin: 20px;">
    <div  style="margin-top: 20px;margin-bottom: 20px;">
      <el-button @click="testDb">测试数据库连接</el-button>
      <el-button @click="testXGB">测试预测</el-button>
    </div>
    <el-row :gutter="24">
      <el-col :span="8">
        <div class="grid-content">
          <el-card class="box-card" style="width: 100%;height: 100%;">
            <div slot="header" class="clearfix">
              <span><strong>原始数据图</strong></span>
              <el-button style="float: right; padding: 3px 0" type="text">查看详情</el-button>
            </div>
            <div id="main1" style="width: 100%;height: 500px;"></div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content" v-loading="loading" element-loading-text="正在预测..."
          element-loading-spinner="el-icon-loading">
          <el-card class="box-card" style="width: 100%;height: 100%;">
            <div slot="header" class="clearfix">
              <span><strong>预测数据图</strong></span>
              <el-button style="float: right; padding: 3px 0" type="text">查看详情</el-button>
            </div>
            <div id="main2" style="width: 100%;height: 500px;"></div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import pythonApi from "../../../api/cby/python.js"
  import * as echarts from 'echarts'
  export default {
    data() {
      return {
        date: [],
        data: [],
        date2: [],
        data2: [],
        loading: false,
      }
    },
    mounted() {
      this.plot_1()
    },
    methods: {
      testDb() {
        pythonApi.testDb()
          .then((response) => {
            console.log(response)
          })
          .catch((error) => {
            console.log(error)
          })
      },
      testXGB() {
        this.loading = true
        pythonApi.testXGB(this.date, this.data)
          .then((response) => {
            console.log(response)
            this.date2 = response.data.date
            this.data2 = response.data.data
            this.plot_2()
            this.loading = false
          })
          .catch((error) => {
            console.log(error)
            this.loading = false
          })
      },
      plot_1() {
        var chartDom = document.getElementById('main1');
        var myChart = echarts.init(chartDom);
        var option;
        let base = +new Date(1968, 9, 3);
        let oneDay = 24 * 3600 * 1000;
        let first = new Date(base)
        let date = [
          [first.getFullYear(), first.getMonth() + 1, first.getDate()].join('/')
        ];
        let data = [Math.round(Math.random() * 300)];
        for (let i = 1; i < 5000; i++) {
          var now = new Date((base += oneDay));
          date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
          data.push(Math.abs(Math.round((Math.random() - 0.494) * 50 + data[i - 1])) + 0.1);
        }
        this.date = date
        this.data = data
        option = {
          tooltip: {
            trigger: 'axis',
            position: function(pt) {
              return [pt[0], '10%'];
            }
          },
          title: {
            left: 'center',
            text: 'Original Chart'
          },
          toolbox: {
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              restore: {},
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: date
          },
          yAxis: {
            type: 'value',
            boundaryGap: [0, '100%']
          },
          dataZoom: [{
              type: 'inside',
              start: 0,
              end: 10
            },
            {
              start: 0,
              end: 10
            }
          ],
          series: [{
            name: 'Fake Data',
            type: 'line',
            symbol: 'none',
            sampling: 'lttb',
            itemStyle: {
              color: 'rgb(255, 70, 131)'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgb(255, 158, 68)'
                },
                {
                  offset: 1,
                  color: 'rgb(255, 70, 131)'
                }
              ])
            },
            data: data
          }]
        };
        option && myChart.setOption(option);
      },
      plot_2() {
        var chartDom = document.getElementById('main2');
        var myChart = echarts.init(chartDom);
        var option;
        let date = this.date2
        let data = this.data2
        option = {
          tooltip: {
            trigger: 'axis',
            position: function(pt) {
              return [pt[0], '10%'];
            }
          },
          title: {
            left: 'center',
            text: 'Predict Chart'
          },
          toolbox: {
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              restore: {},
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: date
          },
          yAxis: {
            type: 'value',
            boundaryGap: [0, '100%']
          },
          dataZoom: [{
              type: 'inside',
              start: 0,
              end: 10
            },
            {
              start: 0,
              end: 10
            }
          ],
          series: [{
            name: 'Predict Data',
            type: 'line',
            symbol: 'none',
            sampling: 'lttb',
            itemStyle: {
              color: 'rgb(255, 70, 131)'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgb(255, 158, 68)'
                },
                {
                  offset: 1,
                  color: 'rgb(255, 70, 131)'
                }
              ])
            },
            data: data
          }, {
            name: 'Original Data',
            type: 'line',
            symbol: 'none',
            sampling: 'lttb',
            itemStyle: {
              color: 'rgb(255, 70, 131)'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgb(255, 158, 68)'
                },
                {
                  offset: 1,
                  color: 'rgb(255, 70, 131)'
                }
              ])
            },
            data: this.data
          }]
        };
        option && myChart.setOption(option);
      },
    }
  }
</script>

<style>
</style>
